<template>
	<div class="c-box u-page u-general-color">
		<u-navbar :title="title" :custom-back="comeback" :background="background" :border-bottom="false" :title-bold="true" title-color="#040503" back-icon-color="#040503"></u-navbar>
		<div class="c-top c-name u-pl-20 u-pr-20">
			<div class="u-pt-10 job-name">{{job.jobName?job.jobName:''}}</div>
			<div class="c-price u-pt-10">
				{{job.salary?job.salary:''}}
			</div>
		</div>
			
		<div class="u-pl-20 u-pr-20 u-pt-10 c-content">
			<div class="u-flex u-pt-10">
				<!-- <div class="u-flex">
					<u-icon name="map" color="#797979" size="28"></u-icon>
					<div class="u-pl-5">
						{{job.area?job.area:''}}
					</div>
				</div> -->
				<div class="u-flex">
					<u-icon name="bag" color="#797979" size="28"></u-icon>
					<div class="u-pl-5">
						{{job.type}}·{{job.requirements}}
					</div>
				</div>
				<div class="u-flex u-pl-20">
					<u-icon name="account" color="#797979" size="28"></u-icon>
					<div class="u-pl-5">
						{{job.recruits}}人 {{job.degree}}
					</div>
				</div>
			</div>
			<div class="u-flex u-pt-10" @click="toCompanyDetails">
				<div>{{job.company}}</div>
			</div>
			<div class="u-pt-10 u-pb-10 u-cl-content c-content-date">
				更新于 {{job.updateTime}}
			</div>
		</div>
		<div class="c-bottom u-pl-20 u-pr-20 u-mt-10">
			<div class="u-border-bottom u-pt-15 u-pb-15 u-title">
				<p class="x-sidebar-left">职位详情</p>
			</div>
			<div class="u-pt-15">
				<div class="u-pb-5" v-if="job.keyword && job.keyword.split(',').length>0">
					<u-tag
						v-for="(titem, tindex) in job.keyword.split(',')"
						:key="tindex"
						:text="titem"
						type="info"
						mode="dark"
						size="mini"
						bg-color="#f7f5f8"
					></u-tag>
				</div>
				<!-- <u-parse :html="this.escape2Html(job.details)" :selectable="true"></u-parse> -->
				<rich-text :nodes="job.details" user-select="true"></rich-text>
			</div>
		</div>
		
		<div style="height: 140rpx;"></div>
			
		<div style="position: fixed;bottom: 0rpx;background-color: #fffbfe;width: 100%;z-index: 3;">
			<div class="u-pt-20 u-pb-40 u-flex" style="width: 90%;margin: 0 auto;height: 80px;">
				<!-- <div class="aui-flex-box">
					<ShareBtn :docUnid="shareData.docUnid" :url="shareData.url" :route="shareData.route" :style="shareData.style" :btnText="shareData.btnText"></ShareBtn>
				</div> -->
				<button class="customStyle-btn" @click="openCustomerServiceChat">
					<u-icon name="kefu-ermai" color="#000000" size="45"></u-icon>
					<span class="customStyle-btn-span">客服</span>
				</button>
				<button class="customStyle-btn" @click="gotoShare">
					<u-icon name="zhuanfa" color="#000000" size="45"></u-icon>
					<span class="customStyle-btn-span">分享</span>
				</button>
				<div style="width: 100%;">
					<u-button type="success" :custom-style="customStyle" @click="connet">
						立即沟通
					</u-button>
				</div>
			</div>
			<ShareBtn :docUnid="shareData.docUnid" :url="shareData.url" :route="shareData.route"
				:style="shareData.style" :type="shareData.type" :btnText="shareData.btnText" ref="sharebtn"></ShareBtn>
		</div>
		
		<u-modal 
		  ref="uModal"
		  title="期待你的加入，快来联系我吧！"
		  v-model="showTips"
		  confirm-text="关闭"
		  confirm-color="#eb5468"
		  @confirm="uploadFile"
		>
		  <div class="slot-content" style="text-align: left">
				<div class="modal-des"></div>
				<div style="font-size: 30rpx;color: #484747;">
					<p>联系人：{{job.leader}} {{job.posts}}</p>
					<p>联系方式：{{job.phone}}<span class="u-pl-5 u-fz-14 tpink-btn-color" @click="copyBtn(job.phone)">复制</span></p>
					<p>公司地址：{{job.address}}</p>
				</div>
				<div class="u-cl-content u-fz-12 u-pt-10">
					<p>玫丽安全提示：</p>
					<div>
						平台严禁用人单位做出任何损害求职者合法权益的违法违规行为，包括但不限于扣押求职者证件、收取求职者财物、向求职者集资入股等，您一旦发现此类行为，<span class="report tpink-btn-color" @click="openCustomerServiceChat">请立即投诉</span>！
					</div>
				</div>
		  </div>
		</u-modal>
		
		<!-- 客服弹窗 -->
		<u-modal v-model="KF_show" title="投诉请添加客服微信" confirm-color="#eb5468">
		    <view class="slot-content2">
			  <img :src="customerServiceUrl" @longpress="saveImg"></img>
		    </view>
		</u-modal>
		
	</div>
</template>

<script>
import globalData from "@/globalData";
import shareMixins from '@/mixins/share';

export default {
  mixins: [shareMixins],
  data() {
    return {
	    content: '',
		showTips: false,
		OrUnid: '',
		job: {
			jobId: ''
		},
		SceneID: '',
		KF_show: false,
		customerServiceUrl: globalData.customerService,//客服微信二维码图片地址
		KF_content_top: '',
		KF_content_bottom: '',
		CodeUrl: '',
		shareData: {
		  docUnid: '',
		  url: '',
		  route: '',
		  style: 9,
		  btnText: '定制分享码',
		  shareTitle: ''
		},
		title: '工作详情',
		background: {
			backgroundColor: '#f3e4e9',
		},
		customStyle: {
			background: '#eb5468 !important'
		},
	}
  },
  
  mounted() {
	
  },
  
  onReady() {
	  // uni.hideShareMenu(); // 禁止分享好友
	  // uni.hideShareTimeline(); // 禁止分享朋友圈
  },
  
  onPullDownRefresh() {
    // 停止Loading
    uni.stopPullDownRefresh();
  },
  
  onReachBottom() {
  },

  onLoad(options) {
	//未登录跳转到登录页面
	// this.checkLogin();
	if(this.isNotNull(options.jobId)){
		this.job.jobId = options.jobId
		this.getJobDetails()
	}else {
		this.showMSG('error', '出错啦！')
		setTimeout(() => {
			this.goBack()
		}, 2500)
	}
	//分享组件数据初始化
	this.shareData.docUnid = this.job.jobId
	this.shareData.url = '/pages_tabbar_contact/index_contact/jobDetails?jobId=' + this.job.jobId,
	this.shareData.route = this.getCurrentPageUrl(this)
  },

  methods: {
	  
	  /**
	   * 获取岗位详情
	   */
	  async getJobDetails() {
	    let result = await this.$u.api.unifyMiniRestGet({
	  		systemid: "meily",
	  		url: "/job/get/"+this.job.jobId,
	  	    loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
	  	});
	  	if(result.code == 200){
	  		this.job = result.data
			this.shareData.shareTitle = '月薪'+this.job.salary+'！！'+this.job.jobName+'·'+this.job.recruits+'人｜'+this.job.company
	  	}
	  },
	  
	  /**
	   * 投递简历
	   */
	  async deliverResume(){
		  //判断用户是否已经投递过该岗位
		  let res1 = await this.$u.api.unifyRequest({
		  	appid: 'OnRecruit',
		  	wf_num: 'R_OnRecruit_BL012',
		  	OrUnid: this.OrUnid,
		  	userId: uni.getStorageSync('userInfo').userId,
			SceneID: this.SceneID,
		    loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		  });
		  if(res1.data=='true'){//已投递过简历
			  this.showMSG("error","请勿重复投递！")
		  }else{//未投递过简历
			this.showTips = true
		  }
	  },
	  
	  /**
	   * 获取二维码弹窗数据
	   */
	  async getQrCodeData(){
	  	let data = await this.$u.api.unifyRequest({
	  		appid: 'AppletsPro',
	  		wf_num: 'R_AppletsPro_B056',
	  	    UniquePosition: 'pages_private_scene1_OnRecruit-JobDetail',
	  	    loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
	  	});
	  	if(data.code == 200){
	  		this.CodeUrl = data.data.CodeUrl
	  		this.KF_content_top = data.data.TopContent
	  		this.KF_content_bottom = data.data.BottomContent
	  		// this.KF_content = data.data.TopContent + `<img src="`+data.data.CodeUrl+`" height="150" @longpress="saveImg"></img>` + data.data.BottomContent
	  		this.KF_show = true
	  	}
	  },
	  
	  /** 
	   * 立即举报
	   */
	  showCustomerService() {
		  this.showTips = false
		  this.KF_show = true
	  },
	  
	  /** 
	   * 立即沟通
	   */
	  connet() {
		  //登录验证
		  var loginRes = this.checkLogin(1)
		  if (!loginRes) {
		   return false;
		  }
		  this.showTips = true
	  },
	  
	  /**
	   * 点击左下角直接分享按钮
	   */
	  gotoShare() {
		this.$refs.sharebtn.wakeUpPop()
	  },
	  
	  /**
	  * 点击联系客服
	  */
	 async openCustomerServiceChat() {
		let result = await this.$u.api.unifyMiniRestGet({
		   systemid: "meily",
		   url: "/qyapi/kf/account/url/".concat(globalData.openKfid_HR),
		   loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if (result.code == 200) {
		   const pages = getCurrentPages(); // 获取栈实例
		   //当前页面路径(带参数)
		   let currentPage = pages[pages.length - 1]['$page']['fullPath']
		   let kfUrl = result.data
		   wx.openCustomerServiceChat({
			extInfo: {
			 url: kfUrl
			},
			corpId: globalData.corpId,
			showMessageCard: true,
			sendMessagePath: currentPage,
			success(res) {
			 console.log(res)
			}
		   })
		} else {
		   this.showMSG('error', '出错啦！');
		}
	 },
	  
	  // 长按保存图片
	  saveImg(e){
	    let url = this.CodeUrl
	    //用户需要授权
	    wx.getSetting({
	  	success: (res) => {
	  		if (!res.authSetting['scope.writePhotosAlbum']) {
	  		 wx.authorize({
	  		  scope: 'scope.writePhotosAlbum',
	  		  success:()=> {
	  		   // 同意授权
	  		   this.saveImg1(url);
	  		  },
	  		  fail: (res) =>{
	  		   console.log(res);
	  		  }
	  		 })
	  		}else{
	  		 // 已经授权了
	  		 this.saveImg1(url);
	  		}
	  	   },
	  	   fail: (res) =>{
	  		console.log(res);
	  	   }
	  	})
	  },
	   
	  saveImg1(url){
	  	wx.getImageInfo({
	  	   src: url,
	  	   success:(res)=> {
	  		let path = res.path;
	  		wx.saveImageToPhotosAlbum({
	  		 filePath:path,
	  		 success:(res)=> { 
	  		  this.showMSG("success","保存成功！")
	  		 },
	  		 fail:(res)=>{
	  		  console.log(res);
	  		 }
	  		})
	  	   },
	  	   fail:(res)=> {
	  		console.log(res);
	  	   }
	  	})
	  },
	  
	  //点击一键复制
	  copyBtn (text) {
	  	wx.setClipboardData({
	  	  //准备复制的数据内容
	  	  data: text,
	  	  success: function (res) {
	  		wx.showToast({
	  		  title: '已复制',
	  		});
	  	  }
	  	});
	  },
	  
	  /**
	   * 点击联系客服
	   */
	  async openCustomerServiceChat() {
	  	let result = await this.$u.api.unifyMiniRestGet({
	  		systemid: "meily",
	  		url: "/qyapi/kf/account/url/".concat(globalData.openKfid_HR),
	  		loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
	  	});
	  	if (result.code == 200) {
	  		const pages = getCurrentPages(); // 获取栈实例
	  		//当前页面路径(带参数)
	  		let currentPage = pages[pages.length - 1]['$page']['fullPath']
	  		let kfUrl = result.data
	  		wx.openCustomerServiceChat({
	  			extInfo: {
	  				url: kfUrl
	  			},
	  			corpId: globalData.corpId,
	  			showMessageCard: true,
	  			sendMessagePath: currentPage,
	  			success(res) {
	  				console.log(res)
	  			}
	  		})
	  	} else {
	  		this.showMSG('error', '出错啦！');
	  	}
	  },
	  
  }

};
</script>

<style scoped>
	.c-box{
		/* background-color: #f7f5f5; */
	}
	
	.c-top{
		display: flex;
		justify-content: space-between;
		/* background-color: #FFFFFF; */
	}
	
	.c-content{
		/* background-color: #FFFFFF; */
		color: #797979;
	}
	
	.c-bottom{
		/* background-color: #FFFFFF; */
	}
	
	.c-name{
		font-size: 38rpx;
		font-weight: 550;
	}
	
	
	/* 竖线 */
	.x-sidebar-left{
		text-indent: 20rpx;
		line-height: 30rpx;
		border-left: 7rpx solid #eb5468;
		width:150px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.c-price{
		color: #ea4d5e;
	}
	
	.c-content-date{
		font-size: 25rpx;
	}
	
	.customStyle{
	  border: none !important;
	  background-color:transparent;
	  padding-left: 0rpx !important;
	  padding-right: 0rpx !important;
	}
	
	.customStyle::after {
	  border: none;
	}
	
	.modal-des{
		text-indent:2em;
	}
	
	.slot-content {
		font-size: 25rpx;
		color: #797979;
		padding-left: 30rpx;
		line-height: 45rpx;
		padding: 40rpx;
	}
	
	.color-blue{
		color: #3b79fe;
	}
	
	.job-name{
		  width: 400rpx;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap; 
	  }
	  
	.slot-content2 {
		font-size: 28rpx;
		color: #bcbcbc;
		text-align: center;
		margin: 0 auto;
	}
	.slot-content2 img {
		height: 750rpx;
	}
	.aui-flex-box {
		min-width: 0;
		font-size: 14px;
		color: #333;
		width: 90rpx;
	}
	.report {
		text-decoration: underline;
	}
	.customStyle-btn {
		width: 50rpx;
		height: 90rpx;
		border: none !important;
		background-color: transparent;
		margin-left: 0;
		margin-right: 15rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
		padding-top: 6rpx !important;
	}
	
	.customStyle-btn::after {
		border: none;
	}
	
	.customStyle-btn-span {
		font-size: 20rpx;
		color: #000000;
		line-height: 45rpx;
	}
	
</style>
